<template>
  <el-card shadow="hover">
    <div @click="getPaper">
      <i class="el-icon-magic-stick"></i>
      <p>切换背景图片</p>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'WallPaper',
  data () {
    return {
      currentDate: new Date(),
      index: 0,
      wallPaperAniUrl: ['https://cdn.pixabay.com/photo/2024/02/18/13/13/ai-generated-8581189_1280.jpg', 'https://cdn.pixabay.com/photo/2024/03/03/12/42/ai-generated-8610368_1280.png', 'https://img1.baidu.com/it/u=4227080054,3041730759&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', 'https://img1.baidu.com/it/u=1510526262,3758276581&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800']
    }
  },
  methods: {
    getPaper () {
      this.$bus.$emit('delColor') //触发delColor事件
      if (this.index === this.wallPaperAniUrl.length) {
        this.index = 0
      }
      let paperObj = {
        url: this.wallPaperAniUrl[this.index],
        type: 'picture'
      }
      this.$bus.$emit('wallPaper', paperObj)//触发wallPaper事件，并传递paperObj数据
      this.index++
    }
  },

}
</script>
<style scoped>
.el-card {
  background-color: rgba(249, 139, 166, 0.5);
  color: #fff;
  /* height: 165px; */
  cursor: pointer;
}

div {
  margin: 0 auto;
}

i {
  display: block;
  font-size: 100px;
  text-align: center;
}

p {
  text-align: center;
}
</style>
